<template>
  <h1>
    合理 {{ count }}--
    {{ p }}
  </h1>
  <button @click="count++">虚拟滚动列表</button>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="240"
    key-field="id"
    v-slot="{ item }"
    style="display: flex; flex-wrap: wrap; justify-content: space-around"
  >
    <div class="user">
      <!-- {{ item.name }} -->
      <div class="box" v-for="url in urls" :key="url">
        <span>我是head</span>
        <el-image :src="url" lazy> </el-image>
      </div>
    </div>
  </RecycleScroller>
  <!-- <DynamicScroller :items="list" :min-item-size="54" class="scroller">
    <template v-slot="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :size-dependencies="[item.message, item.src]"
        :data-index="index"
      >
        <div class="avatar">
          <img :src="item.src" alt="avatar" class="image" />
        </div>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller> -->
  <div class="demo-image__lazy">
    <el-image v-for="url in urls" :key="url" :src="url" fill="cover" lazy />
  </div>
</template>

<script setup lang="ts">
// import img from '@/assets/images/a.webp'
const count = ref(0)
const obj = reactive<{ list: any[] }>({
  list: [],
})
const p = computed(() => {
  return count.value++
})
watch(count, (newValue) => {
  console.log('newValue', newValue)
})
let { list } = toRefs(obj)
onMounted(() => {
  for (let i = 1500; i >= 0; i--) {
    obj.list.push({
      id: i,
      name: Math.random(),
    })
  }
})
const urls = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
]
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
.scroller {
  height: 500px;
  border: 1px solid #42b983;
}

.user {
  width: 100%;
  height: 200px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
}
/* .image {
  width: 24%;
  height: 100px;
  display: inline-block;
} */
.demo-image__lazy {
  height: 400px;
  overflow-y: auto;
}
.demo-image__lazy .el-image {
  display: inline-block;
  min-height: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 50%;
}
.box {
  position: relative;
}
.box span {
  position: absolute;
  left: 0;
  top: 0;
  color: violet;
}
.el-image{
  margin-top: 20px;
  width:100%;
}
.demo-image__lazy .el-image:last-child {
  margin-bottom: 0;
}
</style>
